<template>
  <!-- svg:图标外层容器节点,内部需要与use标签结合使用 -->
  <svg :style="{ width, height }" aria-hidden="true">
    <!-- xlink:href执行用哪一个图标,属性值务必#icon-图标名字 -->
    <!-- use标签fill属性可以设置图标的颜色 -->
    <use :xlink:href="iconName" :fill="color"></use>
  </svg>
</template>

<script setup >
//接受父组件传递过来的参数
const props=defineProps({
  //xlink:href属性值前缀
  iconClass: {
    type: String,
    required: true
  },
  className: {
    type: String,
    default: ''
  },

  //接受父组件传递颜色
  color: {
    type: String,
    default: '#fff'
  },
  width: {
    type: String,
    default: '16px'
  },
  //接受父组件传递过来的图标的高度
  height: {
    type: String,
    default: '16px'
  }
  //接受父组件传递过来的图标的宽度

})
const iconName = computed(() => `#icon-${props.iconClass}`)
// const svgClass= computed(() => {
//   if (props.className) {
//     return `svg-icon ${props.className}`
//   }
//   return 'svg-icon'
// })
</script>
<style scoped lang="scss">
.sub-el-icon,
.nav-icon {
  display: inline-block;
  font-size: 15px;
  margin-right: 12px;
  position: relative;
}

.svg-icon {
  width: 1em;
  height: 1em;
  position: relative;
  fill: currentColor;
  vertical-align: -2px;
}
</style>
